<template>
    <div class="tree-container" ref="treeContainer">
        <el-tree
            :data="menuList"
            highlight-current
            :props="{children: 'children',label: 'lable'}"
            :default-expanded-keys="expandedKeys"
            node-key="id"
            ref="tree"
            v-if="menuList.length > 0"
            :indent="20" @node-click="handleMenuClick">
            <div class="slot-t-node" slot-scope="{ node, data }">
                <div>
                  <el-tooltip class="item" effect="dark" content="正常在测" placement="top-start">
                    <i class="iconfont greenText" v-if="data.node.workStatus == '正常在测'
                " style="font-size: 13px;">&#xe620;</i>
                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="一般性检查" placement="top-start">
                    <i class="iconfont blueText" style="font-size: 22px;"  v-if="data.node.workStatus == '一般性检查'
                ">&#xebc1;</i>
                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="停测" placement="top-start">
                    <i class="iconfont redText" v-if="data.node.workStatus == '停测'
                ">&#xe68b;</i>
                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="封存" placement="top-start">
                    <i class="iconfont yellowText" v-if="data.node.workStatus == '封存'
                ">&#xe683;</i>
                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="损坏" placement="top-start">
                    <i class="iconfont redText" v-if="data.node.workStatus == '损坏'
                ">&#xe6c9;</i>
                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="报废" placement="top-start">
                    <i class="iconfont yellowText" style="font-size: 16px;"  v-if="data.node.workStatus == '报废'
                ">&#xe629;</i>
                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="其它" placement="top-start">
                    <i class="iconfont greyText" v-if="data.node.workStatus == '其它'
                ">&#xe804;</i>
                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="报备" placement="top-start">
                    <i class="iconfont greyText" v-if="data.node.workStatus == '报备'
                ">&#xe713;</i>
                </el-tooltip> 

                <el-tooltip class="item" effect="dark" content="未知状态" placement="top-start">
                    <i class="iconfont greyText" style="font-size: 13px;" v-if="data.node.workStatus == ''
                ">&#xe622;</i>
                </el-tooltip>

                <i class="iconfont yellowText" style="font-size: 13px;" v-if="data.node.workStatus == null && data.node.isBottom == false">&#xe604;</i>

                <span style="font-size: 14px;margin-left: 6px;">{{ data.lable }}</span>
                </div>
               <div class="showBbtn">
                 <el-tooltip class="item" effect="dark" content="查看仪器信息" placement="top-start">
                   <i class="el-icon-more blueText"  v-if="data.node.isBottom" @click.stop="handleShowYQ(data)"></i>
                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="查看项目属性" placement="top-start">
                   <i class="el-icon-more blueText"  v-if="data.children && data.children.length > 0 && data.children[0].node.isBottom && data.node.ifEnvironment != 1" @click.stop="handleShowXM(data)"></i>
                </el-tooltip>
               </div>
            </div>
        </el-tree>
        <div v-else>
            <noData showMenu description="暂无目录"/>
        </div>
    </div>
</template>

<script>
import noData from '@/components/base/noData.vue'
export default ({
    components:{noData},
    props:{
        menuList:{
            type:Array,
            default:()=>{
                return []
            }
        },
        expandedKeys:{
            type:Array,
            default:()=>{
                return []
            }
        }
    },
    data() {
        return{
           
        }
    },
    methods:{
        handleMenuClick(data) {
          this.$emit('handleMenuClick',data)
        },
        handleShowYQ(data){
            this.$emit('handleShowYQ',data)
        },
        handleShowXM(data){
            this.$emit('handleShowXM',data)
        },
    }
})
</script>

<style scoped lang="scss">
.el-tree {
    width: 100%;
    margin-top: 10px;
    font-size: 14px;
    background:none;
}
.tree-container {
  position: relative;
  height: 100%;
  ::v-deep .el-tree-node.is-current > .el-tree-node__content {
    color: #409eff !important;
    font-weight: bold;
  }
 
  ::v-deep .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
 
  ::v-deep .el-icon-caret-right:before {
    content: "\e791";
    font-size: 18px;
  }
 
  ::v-deep .el-tree-node__expand-icon {
    padding: 0px;
  }
 
  ::v-deep .el-tree-node__expand-icon.is-leaf {
    margin-left: 0px;
  }
 
  ::v-deep .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
 
  ::v-deep .el-tree-node__children {
    padding-left: 16px;
  }
 
  ::v-deep .el-tree > .el-tree-node:before {
    border-left: none;
  }
 
  ::v-deep .el-tree > .el-tree-node:after {
    border-top: none;
  }
 
  ::v-deep .el-tree-node:before {
    content: "";
    left: 10px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
 
  ::v-deep .el-tree-node:after {
    content: "";
    left: 10px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
 
  ::v-deep .el-tree-node:before {
    border-left: 1px dashed #e6ebf5;
    bottom: 0px;
    height: 100%;
    top: -19px;
    width: 1px;
  }
 
  ::v-deep .el-tree-node:after {
    border-top: 1px dashed #e6ebf5;
    height: 25px;
    top: 20px;
    width: 20px;
  }
 
  .el-tree-node :last-child:before {
    height: 40px;
  }
  
  ::v-deep .el-tree .el-tree-node {
    position: relative;
  }
  
  ::v-deep .el-tree-node .el-tree-node__content {
    height: 34px;
    padding-left: 0px !important;
    border: none;
  }
  
  ::v-deep .el-tree-node .el-tree-node__content::before {
    height: 100%;
    top: 0;
    width: 1px;
    margin-left: 1px;
    margin-top: 0px;
  }
  
  ::v-deep .el-tree-node .el-tree-node__children .el-tree-node__content::before {
    border-left: 0px dashed #e1e5eb;
  }
  
  ::v-deep .el-tree-node .el-tree-node__content::after {
    height: 1px;
    top: 18px;
    width: 13px;
    margin-left: 1px;
  }
  
  ::v-deep .el-tree-node .el-tree-node__children .el-tree-node__content::after {
    border-top: 0px dashed #e1e5eb;
  }
  
  ::v-deep .el-tree-node .el-tree-node__content::before,
  ::v-deep .el-tree-node .el-tree-node__content::after {
    content: "";
    position: absolute;
    right: auto;
  }
}


.slot-t-node {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  width: 90%;
  i{
    font-weight: bold;
    font-size: 16px;
  }
  &:hover{
    .showBbtn{
      display: block;
    }
  }
  .showBbtn{
    display: none;
  }
}
</style>
